<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>

<% // Use of PersonBean and Image in a JSP. %>
<jsp:useBean id="person" class="servlet.PersonBean" scope="page"/>
<jsp:setProperty name="person" property="*"/>

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  	<title>Who is In?</title>
	</head>
    <body>
		<!-- Load Feather code -->
		<script type="text/javascript" src="../js/feather.js"></script>
		
		<!-- Instantiate Feather -->
		<script type="text/javascript">
		    var featherEditor = new Aviary.Feather({
		        apiKey: 'd754b0e17',
		        apiVersion: 2,
		        tools: 'all',
		        appendTo: '',
		        onSave: function(imageID, newURL) {
		            var img = document.getElementById(imageID);
		            img.src = newURL;
		        }
		    });
		
		    function launchEditor(id, src) {
		        featherEditor.launch({
		            image: id,
		            url: src
		        });
		        return false;
		    }
		</script>
		
		<div id="injection_site"></div>
		
		<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>
		
		<!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
		<p><input type="button" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
		<p><input type="submit" value="Send Image"></p>
	</body>
</html>